<template>
  <div class="uc-info column">
    <div class="row no-wrap">
      <div class="label">{{$t('账号')}}</div>
      <div class="username">{{user.Name}}</div>
    </div>
    <div class="row no-wrap">
      <div class="label">{{$t('头像')}}</div>
      <q-avatar>
        <img class="avatar"
          :src="((user.Avatar.id || user.Avatar) || '@images/admin/company@2x.png') | serverImage">
      </q-avatar>
    </div>
    <div class="row no-wrap">
      <div class="label">{{$t('单位')}}</div>
      <div class="company">{{user.Profile && user.Profile.Company}}</div>
    </div>
    <div class="row no-wrap">
      <div class="label">{{$t('状态')}}</div>
      <div class="status flex no-wrap items-center">
        {{$t(userStatus)}}
        <q-icon v-if="user.Status === '1'" size="xs" name="check"
          class="icon bg-green text-white"></q-icon>
        <q-icon v-else-if="user.Status === '-1'" size="xs" name="close"
          class="icon bg-negative text-white"></q-icon>
        <q-icon v-else size="xs" name="schedule"
          class="icon bg-grey text-white"></q-icon>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'UCInfo',
  computed: {
    user() {
      if (!this.ctx.modules.passport) return {};
      return this.ctx.modules.passport.store.state.passport.user || {};
    },
    userStatus() {
      return {
        '-1': '审核失败',
        0: '审核中',
        1: '审核通过',
      }[this.user.Status] || '审核中';
    },
  },
};
</script>

<style lang="scss" scoped>
.uc-info {
  font-size: 16px;
  color: #666666;
  margin: 48px 22px;

  .row {
    width: 500px;
    margin: 12px 0;

    align-items: center;
  }

  .label {
    margin-right: 16px;
    font-weight: 500;
    &:after {
      content: ':';
    }
  }

  .status {
    .icon {
      height: 16px;
      width: 16px;
      margin-left: 8px;
      border-radius: 8px;
    }
  }
}
</style>
